<template>
	<view>
		<view class="one">
			<view class="re">
				热门推荐 <span class="hot">HOT</span>
			</view>
			<view class="you">
				全部 <i class="iconfont icon-right"></i>
			</view>
		</view>

		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
			<view class="bb">
				<view class="two scroll-view-item_H" v-for="item,index in frist" :key="item.id">
					<view class="left"><img :src="item.mainImage" alt="">
						<view class="shij">
							{{item.totalTime}}
						</view>
					</view>
					<view class="right">
						<p class="tt">{{item.title}}</p>
						<p class="teacher"><i class="iconfont icon-laoshi2" style="font-size: 12px;"></i>{{item.nickName}}
						</p>
						<view class="small">
							<span class="money" v-if="item.isFree"><i class="iconfont icon-moneybag"
									style="font-size: 12px;"></i>免费</span>
							<span class="money" v-else><i class="iconfont icon-moneybag"
									style="font-size: 12px;"></i>{{item.priceDiscount||item.priceOriginal}}</span>
							<span class="zaidu"><i class="iconfont icon-video"
									style="font-size: 12px;"></i>{{item.studyTotal}}人在学</span>
						</view>
					</view>
				</view>
			</view>
		

<view class="bb">
		<view class="two scroll-view-item_H" v-for="item,index in second" :key="item.id">
			<view class="left"><img :src="item.mainImage" alt="">
				<view class="shij">
					{{item.totalTime}}
				</view>
			</view>
			<view class="right">
				<p class="tt">{{item.title}}</p>
				<p class="teacher"><i class="iconfont icon-laoshi2" style="font-size: 12px;"></i>{{item.nickName}}
				</p>
				<view class="small">
					<span class="money" v-if="item.isFree"><i class="iconfont icon-moneybag"
							style="font-size: 12px;"></i>免费</span>
					<span class="money" v-else><i class="iconfont icon-moneybag"
							style="font-size: 12px;"></i>{{item.priceDiscount||item.priceOriginal}}</span>
					<span class="zaidu"><i class="iconfont icon-video"
							style="font-size: 12px;"></i>{{item.studyTotal}}人在学</span>
				</view>
			</view>
		</view> 
</view>
		
		</scroll-view>

	</view>
</template>

<script>
	import {
		getHotList
	} from '../../unti/api.js'
	import {
		ref
	} from 'vue'
	export default {
		scroll: function(e) {
			console.log(e)
			this.old.scrollTop = e.detail.scrollTop
		},

		setup(props, context) {
			let frist = ref([])
			let second = ref([])
			let tuijian = ref([])
			const Tui = getHotList().then((res) => {
				// console.log(res);
				tuijian.value = res.data.data.records
				frist.value = tuijian.value.slice(0, 5)
				second.value = tuijian.value.slice(5)
				// console.log(tuijian);
			})

			return {
				tuijian,
				frist,
				second
			}
		}
	}
</script>

<style>
	@import'../../static/static/icon/iconfont.css';
	.tt{
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.bb{
		display: inline-block;
	}
	.scroll-view_H {
		width: 100%;
		height: 900rpx;
		white-space: nowrap;
	}

	.scroll-view-item_H {
		width: 100%;
		display: inline-block;

	}

	.zaidu {
		margin-left: 20px;
		font-size: 12px;
	}

	.money {
		color: orange;
		font-size: 12px;
	}

	.hot {
		background-color: red;
		padding: 0px 1px;
		color: white;
		font-size: 13px;
		border-top-left-radius: 10px;
		border-top-right-radius: 10px;
		border-bottom-right-radius: 10px;
	}

	.one {
		height: 50px;
		line-height: 50px;
	}

	.two {
		display: flex;
		margin: 20px 10px;
	}

	.teacher {
		font-size: 13px;
		color: #ccc;
	}

	.re {
		float: left;
		font-size: 20px;
	}

	.you {
		float: right;
		font-size: 14px;
		color: #ccc;
	}

	.right {
		flex: 1;
		width: 65%;
	
		
		/* margin-left: 10px; */
	}

	.left {
		width: 34%;
		height: 90px;
		border-radius: 10px;
		position: relative;
	}

	.shij {
		position: absolute;
		padding: 2px 4px;
		border-radius: 30px;
		background: rgba(1, 0, 0, 0.5);
		color: white;
		bottom: 10rpx;
		right: 40rpx;
		font-size: 7rpx;
	}

	.left img {
		width:260rpx;
		height: 180rpx;
		border-radius: 10px;
	}
</style>
